<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="600" :mask-closable="false">
      <Form ref="projectForm" :model="data" :label-width="100" :rules="projectFormValidate">
        <FormItem label="项目编号" prop="project_code" class="margin-bottom-3">
          <Input v-model="data.project_code" placeholder="格式为：YCWN01-2018007" />
        </FormItem>
        <FormItem label="项目名称" prop="project_name" class="margin-bottom-3">
          <Input v-model="data.project_name" />
        </FormItem>
        <FormItem label="业主名称" prop="project_owner" class="margin-bottom-3">
          <Input v-model="data.project_owner" />
        </FormItem>
        <FormItem label="用电地址" prop="project_address" class="margin-bottom-3">
          <Input v-model="data.project_address" />
        </FormItem>
        <FormItem label="用电性质" prop="char_act" class="margin-bottom-3">
          <Input v-model="data.char_act" />
        </FormItem>
        <FormItem label="核定容量" prop="allow_capacity" class="margin-bottom-3">
          <Input v-model="data.allow_capacity" style="width: 80px"/> KVA / <Input v-model="data.transformer_number"  style="width: 40px" /> 台
        </FormItem>
        <FormItem label="工程摘要" prop="abstract" class="margin-bottom-3">
          <Input v-model="data.abstract" />
        </FormItem>
        <FormItem label="接洽日期" prop="apply_date" class="margin-bottom-3">
          <DatePicker :value="data.apply_date" type="date" format="yyyy-MM-dd"
                      placeholder="请选择日期"
                      @on-change="setApplyDate"
                      style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem label="联系人" prop="contact" class="margin-bottom-3">
          <Input v-model="data.contact" />
        </FormItem>
        <FormItem label="电话" prop="mobile" class="margin-bottom-3">
          <Input v-model="data.mobile" />
        </FormItem>
        <FormItem label="邮箱" prop="email" class="margin-bottom-3">
          <Input v-model="data.email" />
        </FormItem>
        <FormItem label="项目类型" prop="is_sure" class="margin-bottom-3" v-show="type == '1'">
          <Select v-model="data.is_sure">
            <Option value=1>正常项目</Option>
            <Option value=0>临时项目</Option>
          </Select>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { checkProject, insertProject, updateProject } from '@/api/project';
import moment from 'moment';
export default {
  name: 'add-edit-project',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      /**
       * '2': 编辑项目
       * '1': 添加项目
       */
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      visible: this.value,
      title: "添加项目",
      height: 540,
      submitLoading: false,
      projectFormValidate: {
        project_name: [
          {required: true, message: "工程项目名称不能为空", trigger: "blur"}
        ],
        project_code: [
          {required: true, message: "工程项目编号名称不能为空", trigger: "blur"},
        ],
        project_owner: [
          {required: true, message: "用户名称不能为空", trigger: "blur"}
        ],
        project_address: [
          {required: true, message: "用电地址不能为空", trigger: "blur"}
        ],
        char_act: [
          {required: true, message: "用电性质不能为空", trigger: "blur"}
        ],
        contact: [
          {required: true, message: "联系人不能为空", trigger: "blur"}
        ],
        abstract: [
          {required: true, message: "工程摘要不能为空", trigger: "blur"}
        ],
        mobile: [
          {required: true, message: "手机号不能为空", trigger: "blur"},
        ],
      },
    }
  },
  methods: {
    init() {
      switch(this.type) {
        case '1':
          this.title = '新增工程项目';
          break;
        case '2':
          this.title = '编辑工程项目';
          break;
      }
    },
    handleCancel() {
      this.visible = false;
    },
    submit() {
      switch(this.type) {
        case '1':   // 新增
          this.$refs.projectForm.validate(valid => {
            if (valid) {
              if (!this.data.apply_date) {
                this.data.apply_date = moment(new Date()).format('YYYY-MM-DD');
              }
              this.submitLoading = true;
              const params = {project_code: this.data.project_code};
              checkProject(params).then(res => {
                if (res.code === 0) {
                  insertProject(this.data).then(res => {
                    if (res.code === 0) {
                      this.$Message.success(res.message);
                    }
                    this.submitLoading = false;
                    this.$emit("on-submit", true);
                    this.visible = false;
                  })
                } else {
                  this.$Message.error(res.message);
                  this.submitLoading = false;
                  return;
                }
              });
            }
          });
          break;
        case '2':   // 修改
          this.$refs.projectForm.validate(valid => {
            if (valid) {
              this.submitLoading = true;
              updateProject(this.data).then(res => {
                if (res.code === 0) {
                  this.$Message.success(res.message);
                }
                this.submitLoading = false;
                this.$emit("on-submit", true);
                this.visible = false;
              })
            }
          });    
          break;
      }
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    setApplyDate(v) {
      this.data.apply_date = v;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>